<!-- 编辑店铺 -->
<template>
    <div class='bgff h100 pd pt10 sdfgdsytryty'>
        <p class="title-label">
            <span v-if="!sh">
                {{ isbj ? "编辑" : "新增" }}
            </span> 店铺

            <span v-if="sh" class="ml20">
                审核状态:
                <span v-if="shekjr == 1">待审核</span>
                <span v-if="shekjr == 2" class="ls">审核通过</span>
                <span v-if="shekjr == 3" class="z9">审核不通过({{ form.AuditRemarks }})</span>
            </span>
        </p>
        <div>
            <div class="context-page-case mt20 ">
                <n-form :model="form" :rules="rules" ref="formRef" label-width="140" :inline="false" size="normal"
                    label-placement="left">
                    <n-grid :cols="24" :x-gap="20" :y-gap="20">
                        <n-form-item-gi label="店铺名称:" path="name" span="24">
                            <n-input v-model:value="form.name" type="text" placeholder="请输入店铺商名称" size="medium"
                                clearable></n-input>
                        </n-form-item-gi>
                        <n-form-item-gi label="所属区域:" span="24" path="provinceId">
                            <div class=" display-flex">
                                <div class="flex-1 mr10">
                                    <n-select v-model:value="form.provinceId" size="medium" :options="optionsa" clearable
                                        filterable @change="prchange" v-if="!isbj" />
                                    <span v-else class="mt5">
                                        {{ arrxe[form.provinceId] }}
                                        {{ arrxe[form.cityId] }}
                                    </span>

                                </div>
                                <div class="flex-1 ml10" v-if="!isbj">
                                    <n-select v-model:value="form.cityId" size="medium" :options="optionsb" clearable
                                        filterable @change="selectcity" />

                                </div>
                            </div>
                        </n-form-item-gi>
                        <n-form-item-gi label="供应商:" span="24" path="supplier" v-if="form.provinceId">
                            <div class=" display-flex">
                                <div class="flex-1 ">
                                    <n-select v-model:value="form.supplier" size="medium" :options="optionsc" clearable
                                        filterable v-if="!isbj" />
                                    <span v-else class="mt5">
                                        {{ jhnbkse(form.supplier) }}
                                    </span>

                                </div>
                            </div>
                        </n-form-item-gi>

                        <n-form-item-gi label="招牌图片:" path="SignboardDrawing" span="12">
                            <div class="logo-context vertical-center pr">
                                <div v-if="form.SignboardDrawing" class="w100 h100 pr dfggtydert">
                                    <img :src="form.SignboardDrawing" class="w100 h100 imgjz" />
                                    <div class="magnifying-glass vertical-center">
                                        <p>
                                            <i class="iconfont dx-sousuo cf fz32 sz sdfsdtrtyt">
                                                <n-image :src="form.SignboardDrawing" class="kjmsertw" />
                                            </i>
                                            <i class="iconfont dx-shuaxin1 cf fz32 sz ml20"
                                                @click="photoShowModaler = true">
                                            </i>
                                        </p>
                                    </div>
                                </div>

                                <div v-else class="vertical-center dsfdgtrytryde" @click="photoShowModaler = true">
                                    点击上传营业执照
                                </div>
                            </div>
                        </n-form-item-gi>


                        <n-form-item-gi label="相关证照:" span="12">

                            <div class="jjnmjxeerrw">
                                <div class="logo-context vertical-center pr" v-for="(item, idx) in zzlist" :key="idx">
                                    <n-image :src="item" class="w100 h100" />
                                    <i class="iconfont dx-shanchu cf fz40 sdfsdrtrt" @click="delezpewe(idx)"></i>
                                </div>
                                <div class="logo-context vertical-center " @click="photoShowModalsan = true">
                                    <span>点击上传相关证照</span>
                                </div>
                            </div>
                        </n-form-item-gi>
                    </n-grid>
                </n-form>

                <div class="mt40 cen" v-if="!sh">
                    <n-button type="primary" size="medium" @click="addForm">{{ isbj ? '保存' : "添加" }}店铺</n-button>
                    <n-button class="ml20" size="medium" @click="callBack">返回上一页</n-button>
                </div>
                <p v-else class="mt40 cen">
                    <n-button type="primary" size="medium" @click="shejjhert" v-if="shekjr == 1">审核通过</n-button>
                    <n-button type="error" size="medium" @click="photoShowModalssi = true" class="ml20"
                        v-if="shekjr == 1">审核不通过</n-button>
                    <n-button size="medium" @click="callBack" class="ml20">返回上一页</n-button>
                </p>
            </div>
        </div>


        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>招牌图片</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="招牌图片"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>



        <n-modal v-model:show="photoShowModalsan" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>相关证照</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsan" types="相关证照"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsan = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsan"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

        <n-modal v-model:show="photoShowModalssi" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>审核原因</div>
            </template>
            <div>
                <n-input v-model:value="AuditRemarks" type="textarea" :autosize='{ minRows: 10 }' placeholder="请输入审核原因"
                    size="medium" clearable @change=""></n-input>

            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsan = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="shjhertsr"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { dxget, dxpost, qurl, hf, callBack, dialog } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
const cz = qurl()
const isbj = ref(false) //是否为编辑
const photoShowModaler = ref(false)
const photoShowModalsan = ref(false)
const photoShowModalssi = ref(false)
const AuditRemarks = ref()
const arrxe = ref()
const sh = ref(cz.sh)
const shekjr = ref()
const form = ref({
    name: "", // 店铺名称
    provinceId: "",//省份id
    cityId: "",//城市id
    supplier: "",//供应商id
    SignboardDrawing: "",//招牌图
    RelevantCertificate: "" //相关证照

})

const formRef = ref()
const optionsa = ref()
const optionsb = ref()
const optionsc = ref()
const zzlist = ref([])
const djdjdfsr = ref()
const url = "xqts/xqshop"
const rules = {
    name: {
        required: true,
        message: '请输入店铺名称',
        trigger: 'blur'
    },

    SignboardDrawing: {
        required: true,
        message: '请上传招牌图',
        trigger: 'blur'
    },
}
const getarea = async () => {
    const { data }: any = await dxget('public/area')
    optionsa.value = data

}
getarea()

const prchange = async (d) => {
    form.value.cityId = ""
    const { data }: any = await dxget('public/area', {
        type: 1,
        code: d
    })
    optionsb.value = data
    form.value.supplier = ""
    getgys()
}

const selectcity = (d) => {
    form.value.supplier = ""
    getgys(d)
}


const getgys = async (d?) => {
    const { data }: any = await dxget("xqts/RegionalSupplier", {
        provinceId: form.value.provinceId,
        cityId: d || form.value.cityId,
        auditStatus:2
    })
    optionsc.value = data
}


let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    form.value.SignboardDrawing = jjnmnxeer
    photoShowModaler.value = false;
};


let jjnmnxesan = "";
const getImgsan = (data) => {
    jjnmnxesan = data;
};
const setImgsan = () => {
    zzlist.value.push(jjnmnxesan)
    photoShowModalsan.value = false;
};



const delezpewe = (idx) => {
    zzlist.value.splice(idx, 1)
}





const addForm = (e) => {
    e.preventDefault();
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            if (zzlist.value.length <= 0) {
                window.$message.error("请上传资质图片")
                return
            }
            if (!isbj.value) {
                const ststic = await dialog('   商铺添加之后信息无法修改, 请确认操作!')
                if (ststic != 1) {
                    return
                }

            }

            form.value["auditStatus"] = 1
            const { errno }: any = await dxpost(url, {
                ...form.value,
                RelevantCertificate: zzlist.value.join(","),
            }, isbj.value ? "put" : "post")
            if (errno == 0) {
                window.$message.success("提交成功！请等待审核")
                callBack()
            }
        }
    })

}


const getcyyxconfig = async () => {
    const { data }: any = await dxget('xqts/getarea')
    arrxe.value = data
}
const getgyswrertw = async () => {
    const { data }: any = await dxget("xqts/RegionalSupplier/getgys")
    djdjdfsr.value = data
}
const initGetdata = async () => {
    await getcyyxconfig()
    await getgyswrertw()
    const { data }: any = await dxget(url, {
        id: cz.id
    })
    zzlist.value = data.RelevantCertificate.split(",")
    form.value = data
    shekjr.value = data.auditStatus


}
const jhnbkse = (data) => {
    try{
        return djdjdfsr.value.filter(a => a.value == data)[0].label
    }catch(e){
        
    }
}
if (cz.id) {
    isbj.value = true
    initGetdata()
}



const shejjhert = async () => {
    const { errno }: any = await dxpost(url, {
        id: cz.id,
        auditStatus: 2
    }, "put")
    if (errno == 0) {
        window.$message.success("审核通过")
        callBack()
    }
}


const shjhertsr = async () => {
    const { errno } = await dxpost(url, {
        id: cz.id,
        auditStatus: 3,
        AuditRemarks: AuditRemarks.value
    }, "put")
    if (errno == 0) {
        window.$message.success("操作成功！")
        callBack()
    }
}
</script>
<style scoped>
.context-page-case {
    width: 800px;
}
</style>